{include file="admin@public/header" /}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css">
<style>
    body {
        background: #fff;
    }

    .grid-wrap {
        padding: 10px 0;
    }

    .manage-wrap {
        margin: 20px auto 10px;
        width: 90%;
        margin: auto;
    }

    .manage-wrap .ui-input {
        width: 200px;
        font-size: 14px;
    }

    .row-item span {
        margin-left: 10px;
    }

    .row-item div {
        float: left;
        height: 30px;
        line-height: 30px;
        width: 60px;
        text-align: right;
    }
</style>

<div id="manage-wrap" class="manage-wrap">
    <form id="manage-form" action="#">
        <div class="grid-wrap">
            <table id="grid">
            </table>
        </div>
    </form>

    <!-- 选择供应商 -->
    <div id="elem_batchs" style="display:none;"></div>
    <!-- 供应商弹窗 -->
    <div class="ui-droplist-wrap" id="chooseBatch"
        style="position: absolute; top: 231.891px; z-index: 1000; width: 102px; display: none; left: 617px;">
        <div style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,0);"
            onclick="closePopup()"></div>
        <div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
            {volist name="customer" id="vo"}
            <div class="list-item" data-id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
            {/volist}
        </div>
    </div>
    <!--  以隐藏的方式获取供应商的值 -->
    <div style="display:none;">
        <input type="text" id="supplierName" value="" autocomplete="off" readonly="">
        <input type="text" id="supplier_id" value="" autocomplete="off" readonly="">
    </div>


    <!-- 选择支出类别 -->
    <div id="elem_spendings" style="display:none;"></div>
    <!-- 支出类别弹窗 -->
    <div class="ui-droplist-wrap" id="chooseSpending"
        style="position: absolute; top: 231.891px; z-index: 1000; width: 102px; display: none; left: 617px;">
        <div style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,0);"
            onclick="closePopup()"></div>
        <div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
            {volist name="money_type" id="vo"}
            <div class="list-item" data-id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
            {/volist}
        </div>
    </div>
    <!--  以隐藏的方式获取支出类别的值 -->
    <div style="display:none;">
        <input type="text" id="spendingName" value="" autocomplete="off" readonly="">
        <input type="text" id="spending_id" value="" autocomplete="off" readonly="">
    </div>
    <!-- 刷新保存表格数据 -->
    <div id="reloadTable" onclick="reloadTable()"></div>
</div>

<script src="/public/static/admin/easyui/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>

<script>
    // 关闭列表选择弹窗
    function closePopup() {
        $("#chooseSpending").hide();
        $("#chooseBatch").hide();
    }
    var Pdata;
    var edit_row = 0;
    var edit_col = 0;
    var row_id = 0;
    var col_name = 0;

    $(document).ready(function () {

        $("#grid").jqGrid({
            // url:'/admin/basic/choose_goods.html?ajax=100',
            datatype: "local",//数据来源，本地数据（local，json,jsonp,xml等）
            height: '230px',//高度，表格高度。可为数值、百分比或'auto'
            //width: Public.setGrid().w,
            //height: Public.setGrid().h,
            colNames: ["", "操作", "供应商", "支出类别", "金额", "备注", 'customer_id', 'money_type_id'],
            colModel: [
                { name: 'id', index: 'id', lable: '', width: 25, align: 'center' },
                { name: 'id', lable: '', width: 70, align: 'center', formatter: cLink },
                // {name:'supplier', width:100,lable:'供应商', editable: true},
                {
                    name: "supplier",
                    label: '供应商',
                    width: 100,
                    link: "inventory",
                    editable: !0,
                    edittype: "custom",
                    editoptions: {
                        custom_element: function (t, e) {
                            // return $(".storageAuto")[0]

                            $("#elem_batchs").html('<div class="pr supplierPr" id="elem_batch"><input type="text" class="textbox storageAuto customelement ui-combo-active" name="locationName" autocomplete="off" id="1_locationName" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s""></span></div>');
                            return $("#elem_batch");
                        },
                        custom_value: function (t, e, a) {
                            var ba = $("#supplierName").val();
                            // var ba = "供应商";
                            $("#supplierName").val("");//重置赋值
                            return ba;
                        },
                        handle: function () {

                        },
                        trigger: "ui-icon-triangle-1-s"
                    }
                },
                // { name: 'spending', width: 100, lable: '支出类别', editable: true },
                {
                    name: "spending",
                    label: '支出类别',
                    width: 100,
                    link: "inventory",
                    editable: !0,
                    edittype: "custom",
                    editoptions: {
                        custom_element: function (t, e) {

                            $("#elem_spendings").html('<div class="pr spendingPr" id="elem_spending"><input type="text" class="textbox storageAuto customelement ui-combo-active" name="spending" autocomplete="off" id="1_spending" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s""></span></div>');
                            return $("#elem_spending");
                        },
                        custom_value: function (t, e, a) {
                            var spending = $("#spendingName").val();
                            // var ba = "支出类别";
                            $("#spendingName").val("");//重置赋值
                            return spending;
                        },
                        handle: function () {

                        },
                        trigger: "ui-icon-triangle-1-s"
                    }
                },
                { name: 'money', width: 100, lable: '金额', editable: true },
                { name: 'remark', width: 150, lable: '备注', editable: true },
                { name: 'customer_id', hidden: true },
                { name: 'money_type_id', hidden: true }
            ],
            cellEdit: true,
            cellurl: '/',
            // cellsubmit:false,
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: "desc",
            pagerpos: "left",//分页位置

            pgbuttons: true,//翻页按钮
            pagination: true,
            altRows: !0,
            gridview: !0,
            shrinkToFit: !1,
            cellLayout: 8,
            autowidth: !0,
            pager: "#page",
            viewrecords: !0,
            checkOnSelect: true,
            cmTemplate: {
                sortable: !1,
                title: !1
            },
            loadError: function (t, e, i) {
                parent.Public.tips({
                    type: 1,
                    content: "操作失败了哦，请检查您的网络链接！"
                })
            },
            beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
                col_name = cellname;
                edit_row = iRow;
                edit_col = iCol;
                row_id = rowid;

            },
        });

        // 增加、删除按钮
        function cLink(cellvalue, options, rowObject) {
            return '<div class="operating"><span class="ui-icon ui-icon-plus" title="新增行" onclick="add()" style="margin-left:8px;"></span> <span class="ui-icon ui-icon-trash" onclick="del(' + rowObject.id + ')" style="margin-left:8px;">删除</span></div>';
        }


        //    循环表格
        var mydata = [];
        if (localStorage.getItem("purchase_data")) {
            mydata = JSON.parse(localStorage.getItem("purchase_data"));
        } else {
            for (var i = 0; i < 5; i++) {
                var obj = { id: i + 1, supplier: "", spending: "", money: "", remark: "" }
                mydata.push(obj);
            }
        }

        for (var i = 0; i <= mydata.length; i++) {
            jQuery("#grid").jqGrid('addRowData', i + 1, mydata[i]);
        }

        // 选择供应商弹窗
        $(".grid-wrap").on("click", ".supplierPr .ui-icon-triangle-1-s", function (e) {
            var top = $(this).offset().top;
            var left = $(this).offset().left;
            $("#chooseBatch").show();
            $("#chooseBatch").css({ "top": (top + 25) + "px", "left": (left - 80) + "px" })
        })
        // 供应商选择鼠标移入移出
        $(".ui-droplist-wrap .droplist .list-item").hover(function () {
            $(this).addClass("on");
        }, function () {
            $(this).removeClass("on");
        })
        // 点击选择供应商
        $("#chooseBatch .droplist").on("click", ".list-item", function (e) {
            var title = $(this).attr("title");
            var id = $(this).attr("data-id");
            $("#batchId").val(id);
            $("#grid").jqGrid("setCell", row_id, 'supplier', title);
            $("#grid").jqGrid("setCell", row_id, 'customer_id', id);
            $("#supplierName").val(title);
            $("#chooseBatch").hide();
        })

        // 选择支付类别弹窗
        $(".grid-wrap").on("click", ".spendingPr .ui-icon-triangle-1-s", function (e) {
            var top = $(this).offset().top;
            var left = $(this).offset().left;
            $("#chooseSpending").show();
            $("#chooseSpending").css({ "top": (top + 25) + "px", "left": (left - 80) + "px" });
        })
        // 点击选择支付类别
        $("#chooseSpending .droplist").on("click", ".list-item", function (e) {
            var title = $(this).attr("title");
            var id = $(this).attr("data-id");
            $("#spendingId").val(id);
            $("#grid").jqGrid("setCell", row_id, 'spending', title);
            $("#grid").jqGrid("setCell", row_id, 'money_type_id', id);
            $("#spendingName").val(title);
            $("#chooseSpending").hide();
        })
    });


    function reloadTable() {
        if (edit_row != 0 && edit_col != 0) {
            $("#grid").jqGrid("saveCell", edit_row, edit_col);
            edit_row = 0;
            edit_col = 0;
        }
    }
</script>
{include file="admin@public/footer" /}